/**
 * =============================================================================
 * ************   Menu 菜单   ************
 * =============================================================================
 */

// 普通菜单宽度基数
@menu-simple-x: 56px;

// 级联菜单宽度基数
@menu-cascade-x: 64px;

.mdui-menu {
  position: relative;
  display: inline-block;
  overflow: visible;
  background-color: inherit !important;

  /* 菜单 */
  .mdui-menu-content {
    position: absolute;
    z-index: calc(@z-index-overlay + 1);
    display: block;
    box-sizing: border-box;
    width: @menu-simple-x * 3;
    margin: 0;
    padding: 8px 0 !important;

    // 简单菜单高度超出窗口高度时，使菜单边框和窗口保持一定距离，菜单内出现滚动条
    overflow-y: auto;
    color: @color-black-text;
    font-size: 16px;
    list-style: none;
    background-color: #fff;
    border-radius: 2px;
    transform: scale(0);
    visibility: hidden;
    opacity: 0;
    transition-timing-function: @animation-curve-linear-out-slow-in;
    transition-duration: .3s;
    transition-property: transform, opacity, visibility;
    will-change: transform, opacity, visibility;
    -webkit-overflow-scrolling: touch;
    .mdui-shadow(8);

    // 菜单中的分隔线，默认上下有 8px 的外边距
    .mdui-divider {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }

  * {
    cursor: pointer;
  }
}

.mdui-menu-left {
  .mdui-menu-content {
    top: 0;
    right: 100%;
    bottom: auto;
    transform-origin: right top;

    .mdui-menu-end& {
      top: auto;
      bottom: 0;
      transform-origin: right bottom;
    }
  }
}

.mdui-menu-right {
  .mdui-menu-content {
    top: 0;
    bottom: auto;
    left: 100%;
    transform-origin: left top;

    .mdui-menu-end& {
      top: auto;
      bottom: 0;
      transform-origin: left bottom;
    }
  }
}

.mdui-menu-top {
  .mdui-menu-content {
    right: auto;
    bottom: 100%;
    left: 0;
    transform-origin: left bottom;

    .mdui-menu-end& {
      right: 0;
      left: auto;
      transform-origin: right bottom;
    }
  }
}

.mdui-menu-bottom {
  .mdui-menu-content {
    top: 100%;
    right: auto;
    left: 0;
    transform-origin: left top;

    .mdui-menu-end& {
      right: 0;
      left: auto;
      transform-origin: right top;
    }
  }
}

/* 打开状态的菜单 */
.mdui-menu-open {
  .mdui-menu-content {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
  }
}

/* 菜单项 */
.mdui-menu-item {
  position: relative;

  &>a {
    position: relative;
    display: block;
    height: 48px;
    padding: 0 16px;
    color: inherit;
    line-height: 48px;
    text-decoration: none;
    user-select: none;
    .mdui-text-truncate();

    &:hover {
      background-color: @color-grey-200;
    }
  }

  // 子菜单默认隐藏，阴影更深
  &>.mdui-menu {
    position: absolute;
    .mdui-shadow(9);
  }

  // 禁用的菜单条目
  &[disabled] {
    &>a {
      color: @color-black-disabled !important;
      cursor: default;

      &:hover {
        background-color: inherit !important;
      }

      .mdui-icon {
        color: @color-black-icon-disabled;
      }
    }
  }
}

/* 激活状态的菜单项 */
.mdui-menu-item-active {
  background-color: @color-grey-200;
}

/* 菜单中的图标 */
.mdui-menu-item-icon {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  padding-right: 16px;
  color: @color-black-icon;
}

/* 菜单中的辅助文本或图标 */
.mdui-menu-item-helper {
  float: right;
}

/* 有子菜单的条目的图标 */
.mdui-menu-item-more {
  float: right;
  width: 24px;
  height: 24px;
  margin: 4px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 17.5l5-5-5-5z' opacity='.54'/%3E%3C/svg%3E");
}


/* 级联菜单 */
.mdui-menu-cascade {
  width: @menu-cascade-x * 5;
  padding: 16px 0;

  // 级联菜单内部不出现滚动条
  overflow: visible;
  font-size: 15px;

  &>.mdui-menu-item {
    &>a {
      height: 32px;
      padding: 0 24px;
      line-height: 32px;
    }
  }
}


/**
 * =============================================================================
 * ************   Menu dark   ************
 * =============================================================================
 */
.layout-theme({
  .mdui-menu-content {
    color: #fff;
    background-color: @layout-dark-color-4;
  }

  .mdui-menu-item {
    &>a {
      &:hover {
        background-color: @color-grey-700;
      }
    }

    &[disabled] {
      &>a {
        color: @color-white-disabled !important;

        .mdui-icon {
          color: @color-white-icon-disabled;
        }
      }
    }
  }

  .mdui-menu-item-active {
    background-color: @color-grey-700;
  }

  .mdui-menu-item-icon {
    color: @color-white-icon;
  }

  .mdui-menu-item-more {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 17.5l5-5-5-5z' fill='%23FFF'/%3E%3C/svg%3E");
  }
});